<template>
  <div class="print_code">
    <button v-print="'#print_area'" ref="printBtn" style="display: none">打印</button>
    <div
      class="hidden_area"
      style="
        visibility: hidden;
        height:0;
        overflow: hidden">
      <!--<div class="hidden_area">-->
      <div id="print_area">
        <div v-for="(item, index) in printData" :key="index" style="padding-top: 10mm;">
          <div style="
            border: 1px solid #c9cacb;
            padding: 5mm;
            display: inline-block;
            vertical-align: middle;">
            <div
              :id="`batchCode${index}`"
              :ref="`batchCode${index}`">
            </div>
          </div>
          <div style="
            display: inline-block;
            font-size: 16mm;
            vertical-align: middle;
            margin-left: 5mm">
            <p>{{item.turnoverBatch.number}}</p>
            <p>生产指令卡</p>
          </div>
          <info-grid
            :rowSize="3"
            labelWidth="120px"
            customClass="print_grid"
            :infoData="item.turnoverBatch"
            :items="gridItems">
          </info-grid>
          <div style="margin-bottom: 2mm">工艺路线</div>
          <el-table
            :data="item.turnoverWorkstages"
            border
            style="width: 290mm;
            border: 2px solid #333;"
            tooltip-effect="dark">
            <el-table-column
              label="工序二维码"
              align="center"
              width="100"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <div v-if="scope.$index%2 === 0"
                     :id="`stageCode${index}/${scope.$index}`"
                     :ref="`stageCode${index}/${scope.$index}`">
                </div>
              </template>
            </el-table-column>
            <mes-column
              :key="index"
              v-for="(column, index) in columns"
              :column="column"></mes-column>
            <el-table-column
              label="工序二维码"
              align="center"
              width="100"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <div v-if="scope.$index%2 === 1"
                     :id="`stageCode${index}/${scope.$index}`"
                     :ref="`stageCode${index}/${scope.$index}`">
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div style="page-break-after: always;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import cols from './cols'
import items from './items'

export default {
  name: 'PrintCode',
  props: {
    printData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      columns: cols,
      gridItems: items,
    }
  },
  methods: {
    startPrint() {
      this.printData.map((item, i) => {
        // 按周转码生成大二维码
        this.batchCode(item.turnoverBatch.number, i)
        item.turnoverWorkstages.map((val, j) => {
          // 按周转码、工序编码、工序序号以‘/’拼接生成工序二维码
          this.stageCode(`${item.turnoverBatch.number}/${val.workstageNumber}/${val.sort}`, i, j)
        })
      })
      setTimeout(() => {
        this.$refs.printBtn.click()
      }, 50)
    },
    // 批次二维码
    batchCode(val, i) {
      // 生成二维码前清空之前的二维码
      this.$refs[`batchCode${i}`][0].innerHTML = ''
      let qrcode = new QRCode('batchCode' + i, {
        width: 150,
        height: 150, // 高度
        colorDark: '#000', // 生成的二维码的深色部分
        colorLight: '#fff' // 生成二维码的浅色部分
      })
      qrcode.makeCode(val)
    },
    // 工序二维码
    stageCode(val, i, j) {
      // 生成二维码前清空之前的二维码
      this.$refs[`stageCode${i}/${j}`][0].innerHTML = ''
      let qrcode = new QRCode(`stageCode${i}/${j}`, {
        width: 80,
        height: 80, // 高度
        colorDark: '#000', // 生成的二维码的深色部分
        colorLight: '#fff' // 生成二维码的浅色部分
      })
      qrcode.makeCode(val)
    },
  }
}
</script>

<style lang="less">
  .code_container {
    border: 1px solid #c9cacb;
    padding: 5mm;
    display: inline-block;
  }

  /* 去掉打印时的页眉页脚 */
  @page {
    size: auto;   /* auto is the initial value */
    margin: 0;  /* this affects the margin in the printer settings */
  }

  @media print {
    /* 打印时隐藏 */
    .not-print {
      opacity: 0
    }

    #print_area {
      width: 310mm;
      box-sizing: border-box;
      padding-left: 10mm;
    }

    .print_grid {
      width: 290mm;
      margin-bottom: 10mm;
      margin-top: 10mm;
      border-top: 1px solid #333 !important;
      border-left: 1px solid #333 !important;
      .info_grid_item {
        border-bottom: 1px solid #333 !important;
        border-right: 1px solid #333 !important;
      }

      .info_grid_label {
        border-right: 1px solid #333 !important;
      }
    }

    .el-table--border th, .el-table--border td {
      border-right: 1px solid #333 !important;
    }

    .el-table td, .el-table th.is-leaf {
      border-bottom: 1px solid #333 !important;
    }
  }
</style>
